<!--
 * @Description: 
 * @Author: HKH
 * @Date: 2024-11-15 16:02:25
 * @LastEditors: HKH
 * @LastEditTime: 2024-11-15 17:03:47
-->

<script lang="ts" setup>
import { reactive } from 'vue'
const form = reactive({
  username: '',
  password: '',
  email: '',
  name: '',
  iphone: '',
  gender: '',
  date: '',
  checkCode: '',
})

const onSubmit = () => {
  console.log('submit!')
  console.log(form)
}
const onCancel = () => {
  console.log('cancel!')
  Object.keys(form).forEach(key => {
    form[key] = '';
  });
}
</script>

<template>
    <div class="bg">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <p align="right">已有账号,立即登录!</p>
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名"/>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="form.password" type="password" show-password placeholder="请输入密码"/>
            </el-form-item>

            <el-form-item label="Email">
                <el-input v-model="form.email" placeholder="请输入Email"/>
            </el-form-item>

            <el-form-item label="出生日期">
                <el-date-picker
                    v-model="form.date"
                    type="date"
                    clearable
                    placeholder="请选择您的出生日期"
                />
            </el-form-item>
            
            <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
                <el-radio value="female">男</el-radio>
                <el-radio value="male">女</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="验证码">
            <el-input id="checkCode" v-model="form.checkCode" type="text" placeholder="请输入收到的验证码"/>
            </el-form-item>

            <el-form-item>
            <el-button type="warning" @click="onSubmit">注册</el-button>
            <el-button type="warning" @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    

<style scoped>
   .el-input#checkCode {
    width: 200px;
}
    .bg{
        width: 1000px;
        height: 600px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-form-item >>>label{
       padding-right: 100px;
        color: #000;
    }
    .el-input{
        width: 1000px;
        border: #000;
    }
    .el-button{
        margin-left:150px ;
    }
    .el-radio-group{
        margin-left: 100px;
    }


</style>
